<template>
	<view class="layoutWrap">
		<view class="grayBox"></view>
		<view class="wrap">
			<view class="artInfo">
				<text class="tit" v-text="detail.title"></text>
				<view class="artTime">
					<text v-text="detail.sendTeacherName"></text>
					<text v-text="detail.sendDate"></text>
					<navigator :url="`numCal?data=${id}`" v-text="`已读：${readNum[1]}/${readNum[0] + readNum[1]}`"></navigator>
				</view>
				<text class="con" v-text="detail.content" v-show="detail.content"></text>
			</view>
		</view>

		<view v-for="(item, index) in detail.attachments" :key="index">
			<view class="imgList" v-if="fileType(item.fileName)">
				<view class="imgPart"><image :src="item.fileUrl" mode="aspectFit" @click="previewImg(item)"></image></view>
			</view>
			<view v-else class="download">
				<image src="../../static/file.png" class="file"></image>
				<view class="fileInfo">
					<text v-text="item.fileName"></text>
				</view>
				<view class="load" @click="downloadFile(item.fileUrl)">
					<image src="../../static/load.png"></image>
					下载阅读
				</view>
			</view>
		</view>
		<button class="submitButtonActive" v-if="detail.isManualConfirm && !detail.isRead" @click="confirm">确认收到</button>
	</view>
</template>

<script>
import { dictCode } from '../../libs/common.js';
export default {
	data() {
		return {
			detail: '',
			isRead: false,
			id: '',
			readNum: ''
		};
	},
	onLoad(option) {
		this.id = option.data;
		this.getDetail(this.id);
		this.updateReadStatus(this.id);
		this.count(this.id);
	},
	computed: {
		//匹配区分文件格式
		// /(?<=\.)[A-Za-z]*/.exec('be08563d-9a06-42d5-bcc7-d0a3524fdf06.txt')
		fileType() {
			return function(val) {
				// let reg = /(?<=\.)[A-Za-z]*/;
				// let reg = new RegExp("(?<=\\.)[A-Za-z]+",'g');
				let reg = new RegExp("\\.\\w+$");
				let res = reg.exec(val);
				let imgTypeArr = ['.jpg', '.jpeg', '.png','.gif','.JPG', '.JPEG', '.PNG','.GIF'];
				if (imgTypeArr.includes(res[0])) {
					return true;
				} else {
					return false;
				}
			};
		}
	},
	methods: {
		//图片预览
		previewImg(item) {
			let urls = [item.fileUrl];
			wx.previewImage({
				current: item.fileUrl, //当前图片地址
				urls: urls, //所有要预览的图片的地址集合 数组形式
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		},
		//获取通知详情
		async getDetail(id) {
			let resp = await this.$http.get({
				url: '/oa/notification/weChat/detail',
				data: {
					id: id
				}
			});
			this.detail = resp.result;
			// dictCode('dict_yes_no',this.detail.isRead)
		},
		//更新阅读状态
		updateReadStatus(id) {
			this.$http.get({
				url: '/oa/notification/weChat/updateReadStatus',
				data: {
					id: id
				}
			});
		},
		//确认已读
		confirm() {
			this.$http.get({
				url: '/oa/notification/weChat/updateConfirmStatus',
				data: {
					id: this.id
				}
			});
			uni.navigateBack();
		},
		//下载文档
		downloadFile(url) {
			uni.showLoading({
				title: '打开文档中...'
			});
			uni.downloadFile({
				url: url, //仅为示例，并非真实的资源
				success: res => {
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success(res) {
							let path = res.savedFilePath;
							setTimeout(
								() =>
									{uni.openDocument({
										filePath: path,
										success(res) {
											setTimeout(function() {
												uni.hideLoading();
											}, 1000);
										},
										fail() {
											setTimeout(function() {
												uni.hideLoading();
											}, 1000);
											uni.showToast({
												title: '下载失败',
												icon: 'none'
											});
										},
										complete(res) {
											
										}
									})},
								1000
							);
						
						}
					});
				}
			});
		},
		//已读未读数量统计
		async count() {
			let resp = await this.$http.get({
				url: '/oa/notification/weChat/countRead',
				data: {
					id: this.id
				}
			});
			this.readNum = resp.result;
		}
	}
};
</script>

<style lang="scss" scoped>
.artInfo {
	.tit {
		font-size: 44upx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 60upx;
		padding-bottom: 40upx;
		display: block;
		text-align: center;
	}

	.con {
		font-size: 32upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin-top: 60upx;
		display: block;
	}
}

.artTime {
	display: flex;
	align-items: center;
	font-size: 26upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: rgba(153, 153, 153, 1);

	text {
		margin-right: 20upx;

		&:nth-of-type(3) {
			margin-left: auto;
			color: #3c68e5;
		}
	}

	navigator {
		margin-left: auto;
		color: #3c68e5;
	}
}

.grayBox {
	width: 100%;
	height: 20upx;
	background: #f2f4f5;
}

.wrap {
	padding: 40upx;
}

.layoutWrap {
	position: relative;
	min-height: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.download {
	border-top: 1upx solid #ddd;
	border-bottom: 1upx solid #ddd;
	padding: 30upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	// margin-top: auto;
	margin-bottom: 30upx;
	.file {
		width: 44upx;
		height: 53upx;
	}
	.fileInfo {
		width: 410upx;
		text {
			display: block;
			&:nth-of-type(1) {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
			&:nth-of-type(2) {
				font-size: 22upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	.load {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(60, 104, 229, 1);

		image {
			width: 27upx;
			height: 26upx;
		}
	}
}
.submitButtonActive {
	margin-top: auto;
	margin-bottom: 20upx;
}
.imgList {
	display: flex;
	width: 646upx;
	justify-content: left;
	flex-wrap: wrap;
	margin: 20upx auto;
}
.imgPart {
	width: 200upx;
	height: 200upx;
	padding: 10upx;
	border: 1upx dashed #ddd;
	position: relative;
	margin-right: 15upx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
